import { useMemo } from 'react';
import './index.less';

import { type WorkInfoI } from '../../config';

const WorkInfo = ({ workInfo }: { workInfo: WorkInfoI }) => {
  const descEls = useMemo(() => {
    const els: JSX.Element[] = [];
    if (!workInfo.formatDescs) {
      return [];
    }
    workInfo.formatDescs.forEach((item, index) => {
      els.push(
        <div key={index} className="desc-item">
          <div className="num-container">
            <div className="num">{index + 1}</div>
          </div>
          <div className='text-container'>
            {item.map(subItem => (
              <span className="text" style={{ fontWeight: subItem.fontWeight, color: subItem.color }}>
                {subItem.text}
              </span>
            ))}
          </div>
        </div>
      );
    });
    return els;
  }, [workInfo]);

  const techStackEls = useMemo(() => {
    const els: JSX.Element[] = [];
    workInfo.techStach.forEach(item => {
      els.push(
        <div key={item} className="tag">
          {item}
        </div>
      );
    });
    return els;
  }, [workInfo]);

  return (
    <div className="work">
      <div className="work-title">
        <div className="title">实习经历</div>
        <div className="en">INTERNSHIP EXPERIENCE</div>
      </div>
      <div className="work-company">
        <div className="time">{`${workInfo.sTime}-${workInfo.eTime}`}</div>
        <div className="company">{workInfo.company}</div>
        <div className="role">{workInfo.role}</div>
        <img className="logo" src={workInfo.logo} style={{ height: workInfo.logoHeight }} />
      </div>
      <div className="work-intro">
        <div className="label">简介：</div>
        <div className="text">{workInfo.intro}</div>
      </div>
      <div className="work-desc-container">{descEls}</div>
      <div className="work-tech-stack">
        <div className="label">技术栈：</div>
        <div className="tags">{techStackEls}</div>
      </div>
    </div>
  );
};

export default WorkInfo;
